<template>
  <tree @query="doQuery" gatewayType="-1"></tree>
  <div class="rightContent">
    <div class="page-header">
      <query :columns="columns" @query="doQuery"></query>
    </div>
    <div class="flex-col-table">
      <div class="btn-row">
      </div>
      <el-table :empty-text="i18n.fy.ondata" :data="data.tableData" :style="{ width: getWidth(), height: getHeight() }"
        border v-loading="data.loading" :element-loading-text="i18n.fy.loading">
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="deviceFid" :label="i18n.language === 'zh-cn' ? '父id' : 'deviceFid'" align="center" />
        <el-table-column prop="reportedType" :label="i18n.language === 'zh-cn' ? '上报类型' : 'reportedType'" width="190"
          align="center">
        </el-table-column>
        <el-table-column prop="eventType" :label="i18n.language === 'zh-cn' ? '事件类型' : 'eventType'" align="center" />
        <el-table-column prop="warningType" :label="i18n.language === 'zh-cn' ? '报警类型' : 'warningType'"
          align="center" />
        <el-table-column prop="otherContent" :label="i18n.language === 'zh-cn' ? '其他内容' : 'otherContent'" />
        <el-table-column prop="needSendMessage" :label="i18n.language === 'zh-cn' ? '通知状态' : 'needSendMessage'">
          <template #default="scope">
            {{ scope.row.needSendMessage == '1' ? '未处理' : scope.row.needSendMessage == '2' ? '不需要处理' : '已处理' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="i18n.language === 'zh-cn' ? '上报时间' : 'createTime'" width="180" />
        <el-table-column prop="updateTime" :label="i18n.language === 'zh-cn' ? '处理时间' : 'updateTime'" width="180" />
      </el-table>
      <el-pagination @size-change="onChanSize" @current-change="onChanPage" v-model:current-page="data.queryForm.page"
        v-model:page-size="data.queryForm.limit" :total="data.total" />
    </div>
  </div>
</template>

<script setup>
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
import query from '../../components/query.vue'
import tree from '../../components/tree.vue'

let columns = reactive(
  {
    'reportedType': {
      'label': i18n.language == 'zh-cn' ? '上报类型' : 'reportedType',//列名称
      'queryValue': ''
    },
    'eventType': {
      'label': i18n.language == 'zh-cn' ? '事件类型' : 'eventType',//列名称
      'queryValue': ''
    },
    'warningType': {
      'label': i18n.language == 'zh-cn' ? '报警类型' : 'warningType',//列名称
      'queryValue': ''
    },
  }
)
let data = reactive({
  queryForm: {
    page: 1,
    limit: 100
  },
  tableData: [

  ],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
    role: [{ required: true, message: '请选择岗位', trigger: 'change' }]
  }
})

const onChanSize = (e) => {
  //修改分页数
  data.queryForm.page = 1;
  data.queryForm.limit = e;
  getList();
}
const onChanPage = (e) => {
  //修改分页
  data.queryForm.page = e;
  getList();
}

const getList = (params) => { // 获取表格数据
  data.loading = true;
  $axios.get('/warningRecord/queryWarningRecordAllList', {
    ...data.queryForm,
    ...params,
    deviceFid: pid.value
  }).then(res => {
    data.loading = false;
    data.tableData = res.data.data.records
    data.total = res.data.data.total
  })
}
let pid = ref('');
const doQuery = (params) => {
  if (params.deviceFid) {
    pid.value = params.deviceFid;
  }
  getList({ ...params, deviceFid: pid.value });
}
const getWidth = () => {
  return (window.innerWidth - 398) + 'px';
}
const getHeight = () => {
  return (window.innerHeight - 220) + 'px';
}

onBeforeMount(() => {
  getList({})
})
</script>

<style lang="scss" scoped>
.available1 {
  color: orangered;
}
</style>